{% load i18n %}
{% load mptt_tags %}
		<link rel="stylesheet" media="screen" href="/media/css/fg.menu.css" type="text/css">
		<link rel="stylesheet" media="screen" href="/media/css/theme/ui.theme.css" type="text/css">
		<style type="text/css">
			#menuLog { font-size:1.4em; margin:20px; }
			.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
			
			.fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
			.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
			a.fg-button { float:left;  }
			button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
			
			.fg-button-icon-left { padding-left: 2.1em; }
			.fg-button-icon-right { padding-right: 2.1em; }
			.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
			.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
			.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	
			
			.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }
		</style>
		<script type="text/javascript" src="/media/js/fg.menu.js"></script>
		<script type="text/javascript"> 
		$(function(){
	    	// BUTTONS
	    	$('.fg-button').hover(
	    		function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },
	    		function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }
	    	);
	    	
			
			$('#flyout').menu({
				content: $('#flyout').next().html(),
				flyOut: true
			});
    	}); 
	    </script>
		<a id="flyout" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" href="/categories"><span class="ui-icon ui-icon-triangle-1-s"></span>{% trans "Categories" %}</a>
		<div id="categories" class="hidden">
			{% full_tree_for_model shop.category as cats %}
			{% for cat, structure in cats|tree_info %}
			   {% if structure.new_level %}<ul><li>{% else %}</li><li>{% endif %}
			   <a href="{% url shop.views.listing category=cat.id %}">{{ cat.title }}</a>
			   {% for level in structure.closed_levels %}</li></ul>{% endfor %}
			{% endfor %}

			
		</div>